<template>
  <div class="show">
    <van-tabs v-model="active">
      <van-tab title="分组">
        <div class="itemm">
          <div class="iconfont icon-chuangjian"></div>
          <div class="titlee">创建分组</div>
        </div>
      </van-tab>
      <van-tab title="菜谱">
        <div class="Item">
          <router-link
            tag="div"
            :to="'/recipe/recipelist?id=' + 3163859"
            class="Items"
          >
            <div class="left">
              <img  src="https://i1.douguo.com/upload/caiku/4/f/d/300_4fa92518f716ceaba30878b19fe3178d.jpg" alt="" />
            </div>
            <div class="right">
              <div class="n">酸甜草莓雪绒饼干</div>

              <div style="width: 63px">2602人看过</div>

              <div class="info">
                <img  src="http://tx1.douguo.net/upload/photo/5/3/5/70_u62328767105505114240.jpg" alt="" />
                <div class="name">🌸香香🌸</div>
              </div>
            </div>
          </router-link>
        </div>
      </van-tab>
      <van-tab class="title" title="笔记">
        <img src="../assets/1.png" alt="" />
        <div class="titlee">您的笔记收藏列表有点空</div>
      </van-tab>
      <van-tab class="title" title="课程">
        <img src="../assets/1.png" alt="" />
        <div class="titlee">您的课程收藏列表有点空</div>
      </van-tab>
    </van-tabs>

    <footNav> </footNav>
  </div>
</template>

<script>
import footNav from "../components/base/footNav.vue";

import { getfollow } from "../api/home";
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      active: 2,
      follow: null,
    };
  },
  methods: {
    getfollowFun() {
      getfollow(3163859).then((data) => {
        this.follow = data.result.recipe;
        console.log(this.follow);
      });
    },
  },
  created() {
    this.getfollowFun();
  },
  components: {
    footNav,
  },
};
</script>

<style lang='less'>
.show {
  text-align: center;
  .titlee {
    font-size: 12px;
    color: #8e8d93;
  }
  .Item {
    margin: 0 20px;
    margin-top: 25px;
    .Items {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      .left {
        width: 155px;
        height: 110px;
        border-radius: 10px;
        margin-right: 12px;
        img {
          width: 155px;
          height: 110px;
          border-radius: 5px;
        }
      }
      .right {
        font-size: 12px;
        .n {
          margin-bottom: 10px;
          color: #303030;
          font-weight: bold;
        }

        .info {
          margin-top: 15px;
          display: flex;
          align-items: center;
          img {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 3px;
          }
          .name {
            color: #9f9f9f;
          }
        }
      }
    }
  }
  .itemm {
    width: 185px;
    height: 235px;
    text-align: center;
    border: 1px solid #f8f8f8;
    .icon-chuangjian {
      margin-top: 85px;
      margin-bottom: 10px;
      font-size: 25px;
      color: #f6cf43;
    }
    .title {
      font-size: 12px;
      color: #9f9f9f;
    }
  }
  .title {
    img {
      width: 165px;
      height: 145px;
      margin-top: 65px;
      margin-bottom: 20px;
    }
  }

  .van-tabs__line {
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 1;
    width: 20px;
    height: 3px;
    background-color: #f9c341;
    border-radius: 3px;
  }

  .van-tab {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 4px;
    /* color: #646566; */
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
  }
  .van-tab--active {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>